<template>
  <div>
    <van-nav-bar
      :title="currentUser.username"
      @click-left="onClickLeft"
      left-arrow
      style="margin-bottom: 6px"
    />
    <van-tabs v-model="activename" animated @click="getList">
      <van-tab title="关注" name="0">
        <van-cell-group inset v-for="user in userFollowingArray" class="vcg">
          <van-image round width="2.5rem" height="2.3rem" :src="user.avatar" />
          <van-cell
            center
            :title="user.username"
            :label="user.introduction"
            class="vc"
          >
            <template #right-icon>
              <van-button
                plain
                hairline
                size="small"
                color="#64C0DF"
                round
                type="info"
                @click="unFollow"
                >取消关注</van-button
              >
            </template>
          </van-cell>
        </van-cell-group>
      </van-tab>
      <van-tab title="粉丝" name="1">
        <van-cell-group inset v-for="followMe in userFollowMeArray" class="vcg">
          <van-image
            round
            width="2.5rem"
            height="2.3rem"
            :src="followMe.avatar"
          />
          <van-cell
            center
            :title="followMe.username"
            :label="followMe.introduction"
            class="vc"
          >
            <template #right-icon>
              <van-button
                plain
                hairline
                size="small"
                icon="plus"
                color="#64C0DF"
                round
                type="info"
                @click="Follow"
                >回关</van-button
              >
            </template>
          </van-cell>
        </van-cell-group>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { Toast } from "vant";
import {mapState} from "vuex";

export default {
  name: "Follow",
  data() {
    return {
      currentUser: { username: "吕易" },
      activename: '',

      userFollowingArray: [
        {
          username: "肥波",
          avatar: "https://img01.yzcdn.cn/vant/cat.jpeg",
          introduction: "喵喵喵!",
        },
        {
          username: "秋水",
          avatar: "https://s1.328888.xyz/2022/08/05/uNr20.jpg",
          introduction: "秋天的瀑布!",
        },
        {
          username: "云梦",
          avatar: "https://s1.328888.xyz/2022/09/23/IyoJs.jpg",
          introduction: "梦中的姑娘，只知姓云!",
        },
        {
          username: "关云长",
          avatar: "https://s1.328888.xyz/2022/09/23/IysPo.png",
          introduction: "在坐的各位都是垃圾",
        },
        {
          username: "马超",
          avatar: "https://s1.328888.xyz/2022/09/23/IyV3p.jpg",
          introduction: "曹贼！拿命来",
        },
      ],
      userFollowMeArray: [
        {
          username: "焊武帝",
          avatar: "https://s1.328888.xyz/2022/09/23/IyMYF.jpg",
          introduction: "一生只爱电焊机",
        },
        {
          username: "刘邦",
          avatar: "https://s1.328888.xyz/2022/09/23/Iygo5.png",
          introduction: "韩信，过来受死",
        },
        {
          username: "太上老君",
          avatar: "https://s1.328888.xyz/2022/09/23/IyfuS.jpg",
          introduction: "泼猴，死来",
        },
        {
          username: "师太",
          avatar: "https://s1.328888.xyz/2022/09/23/Iy8eN.png",
          introduction: "哼，我有倚天剑在手，各位垃圾",
        },
        {
          username: "张三丰",
          avatar: "https://s1.328888.xyz/2022/09/23/IyJkC.png",
          introduction: "妖尼姑？",
        },
      ],
    };
  },
  computed: {
    ...mapState(['userinfo'])
  },
  mounted() {
    // this.active = this.$route.query.active
    this.activename = '';
    console.log(this.$route.query.active);
    this.activename=this.$route.query.active;
    const id = this.userinfo.id;
    if(this.activename=='0'){
      //关注列表
      const url='http://localhost:10002/ums/Attention/list'
      this.axios.post(url,id).then(response =>{
        if(response.data.state==200){
          console.log("数据",response.data.data)
          if(response.data.data!=null){
            this.userFollowingArray = response.data.data
          }
        }
      })
    }else {
      //被关注列表
      const url = 'http://localhost:10002/befollow/list'
      this.axios.post(url,id).then(response =>{
        if(response.data.state==200){
          console.log("成功",response.data.data)
          if(response.data.data!=null){
            this.userFollowMeArray = response.data.data
          }
        }else{
          console.log("失败",response.data.data)
        }
      })
    }

  },
  methods: {
    getList(name,title){
      console.log(name)
      const id = this.userinfo.id
      if(name=='0'){
        //关注列表
        const url='http://localhost:10002/ums/Attention/list'
        this.axios.post(url,id).then(response =>{
          if(response.data.state==200){
            console.log("数据",response.data.data)
            if(response.data.data!=null){
              this.userFollowingArray = response.data.data
            }
          }else {
            console.log("失败",response.data.data)
          }
        })
      }else {
        //被关注列表
        const url = 'http://localhost:10002/befollow/list'
        this.axios.post(url,id).then(response =>{
          if(response.data.state==200){
            console.log("成功",response.data.data)
            if(response.data.data!=null){
              this.userFollowMeArray = response.data.data
            }
          }else{
            console.log("失败",response.data.data)
          }
        })
      }
    },
    onClickLeft() {
      history.go(-1)
    },
    unFollow() {
      Toast("已取消关注");
    },
    Follow() {
      Toast("成功!");
    },
  },
};
</script>

<style scoped>
.vcg {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vc {
  padding-left: 8px;
}
</style>